import React from 'react';
import FromRule from './Main';
import { Modal } from 'antd';
import { WeaDialog, WeaLocaleProvider } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

const confirm = Modal.confirm;
const { getLabel } = WeaLocaleProvider;

@inject('edcFormRuleStore')
@observer
export default class Rule extends React.Component {
  state = {
    isSaving: false,
  };

  getArea() {
    const { offsetWidth, offsetHeight } = document.body;
    const maxWidth = 1000;
    const width = offsetWidth * 0.8;

    return {
      width: width > maxWidth ? maxWidth : width,
      height: offsetHeight * 0.8,
    };
  }

  onSave = () => {
    const { edcFormRuleStore: store, onCancel } = this.props;
    const { rules, isValid } = store;
    const validRules = toJS(rules).filter(isValid);

    if (validRules.length < rules.length) {
      confirm({
        title: getLabel(516488, '规则检测'),
        content: getLabel(516489, '存在不合法的规则， 是否继续保存？'),
        onOk: () => {
          this.saveRules();
        },
        onCancel() {},
        cancelText: getLabel(506972, '取消'),
        okText: getLabel(30986, '保存'),

      });
    } else {
      this.saveRules();
    }
  }

  saveRules = () => {
    const { edcFormRuleStore: store, onCancel } = this.props;

    this.setState({ isSaving: true });
    store.onSave().then(() => {
      this.setState({ isSaving: false });
    });
  }

  render() {
    const { isSaving } = this.state;
    const { appid, edcFormRuleStore } = this.props;

    return (
      <div className="wea-rule-info">
        <FromRule ecId={`${this && this.props && this.props.ecId || ''}_FromRule@kowvr1`} appid={appid} isSaving={isSaving} onSave={this.onSave} store={edcFormRuleStore} />
      </div>
    );
  }
}
